import './Login.css'
import { Input, Button, message } from 'antd';
import { useState } from 'react';
import { userLogin } from '../../api/user.js';
import { MIN_LOADING_TIME } from '../../constant/index.js';
import { useUserStore } from '../../store/user.js';
import { useNavigate } from 'react-router-dom';

/**
 * 登录页面组件
 * @returns React.FC<{}>
 */
export default function Login() {

    const navigator = useNavigate();
    const [messageApi, contextHolder] = message.useMessage();

    const [loading, setLoading] = useState(false)

    //持久化用户全局状态登录方法
    const login = useUserStore(state => state.login);

    //用户注册表单数据
    const [form, setForm] = useState({
        userAccount: '',
        userPassword: ''
    })

    const handleInputChange = (e) => {
        const { name, value } = e.target;
        setForm(prev => ({
            ...prev,
            [name]: value
        }))
    }

    const handleClick = async () => {
        try {
            setLoading(true)

            const [res] = await Promise.all([
                userLogin(form),
                new Promise(resolve => {
                    setTimeout(resolve, MIN_LOADING_TIME)
                })
            ])

            if (res?.data?.code === 0) {
                setLoading(false)
                messageApi.open({
                    type: 'success',
                    content: '登录成功',
                })

                login({ user: res.data.data })
                console.log(useUserStore.getState().user);

                setTimeout(() => {
                    navigator('/', { replace: true })
                }, 1500)
            } else {
                setLoading(false)
                messageApi.open({
                    type: 'error',
                    content: res?.data?.message || '登录失败',
                })
            }

        } catch (e) {
            messageApi.open({
                type: 'error',
                content: '登录失败',
            })

        } finally {
            setLoading(false)
        }

    }


    return (
        <div id="login">
            {contextHolder}
            <form className='form'>
                <h3>用户登录</h3>
                <div className='form-item'>
                    <label className='form-label'>用户名:</label>
                    <Input placeholder='用户名'
                        id='userAccount'
                        name='userAccount'
                        type='text'
                        onChange={handleInputChange}
                    />
                </div>
                <div className='form-item'>
                    <label className='form-label'>密码:</label>
                    <Input placeholder='密码'
                        onChange={handleInputChange}
                        id='userPassword'
                        name='userPassword'
                        type='password' />
                </div>

                <div className="form-item links">
                    <a href="/user/register" className='link'>没有账户?去注册</a>
                    <a href="/user/forget" className='link'>忘记密码</a>
                </div>
                <Button type='primary' className='form-item' loading={loading} onClick={handleClick}>登录</Button>
            </form>
        </div>
    )
}